/*
 * 描述: 注册全局消息提示框组件
 * 作者: 柯基与佩奇
 * 日期: 2020-04-18
 */
// toast.ts

import { createApp, ref, Transition } from 'vue'
import './toast.css'

export const showToast = (message: string='', type: string = 'info', duration: number = 3000) => {
    const container = document.createElement('div')
    document.body.appendChild(container)

    const close = () => {
        app.unmount() // 从 unmount 方法中移除参数
        document.body.removeChild(container)
    }


    const app = createApp({
        setup() {
            const visible = ref(true)

            setTimeout(() => {
                visible.value = false
            }, duration)

            return {
                visible
            }
        },
        template: `
      <transition name="fade">
        <div class="toast-container" v-if="visible">
          <div class="toast" :class="type">
            <div class="content">
              <i class="iconfont" :class="'icon-' + type"></i>
              <span>{{ message }}</span>
            </div>
            <i class="iconfont icon-close close" @click="visible = false"></i>
          </div>
        </div>
      </transition>
    `,
        data() {
            return {
                message,
                type
            }
        },
        mounted() {
            setTimeout(close, duration)
        }
    })

    app.component('Transition', Transition)
    app.mount(container)
}



